<template>
  <div class="detail">
    <div class="head">
      <div>缴费信息</div>
    </div>
    <div class="content">
      <div class="table-title"><i class="el-icon-menu title-icon"></i>记录列表</div>
      <el-table :data="dataList" ref="multipleTable" tooltip-effect="dark" style="width: 100%" border>
        <el-table-column prop="socialCompanyName" label="姓名"></el-table-column>
        <el-table-column prop="socialCompanyCode" label="身份证号"></el-table-column>
        <el-table-column prop="payTime" label="缴费时间"></el-table-column>
        <el-table-column prop="socialPaymentSkuName" label="缴费项目"></el-table-column>
        <el-table-column prop="shouldPay" label="缴费金额"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="goPage(scope.row)" type="text" size="small"> 查看详情 </el-button>
          </template>  
        </el-table-column>
      </el-table>
    </div>
    <paginate :callback="getData" :page="pageObj"></paginate>
    
  </div>
</template>
<script>
import {socialOrderList} from 'api/social/manage/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      pageObj: {
        currentCount: 1
      }, // 分页数据
      dataList: [] // 缴费单位列表
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () { // 初始化数据
      this.getData(1)
    },
    getData (int) { // 获取数据
      socialOrderList({
        page: int,
        count: 15,
        startTime: '',
        endTime: '',
        socialPaymentSkuName: '',
        socialCompanyName: '',
        orderNo: 'this.name'
      }).then(res => {
        res.data.forEach((obj) => {
          obj.payTime = common.timeFormat(obj.payTime, 'yyyy-MM-dd hh:mm:ss')
          obj.shouldPay = '¥ ' + (obj.shouldPay / 100).toFixed(2)
        })
        this.dataList = res.data
        this.pageObj = res.page
      })
    },
    goPage (data) { // 路由跳转 详情页面
      this.$router.push({name: 'payManageDetail', query: {id: data.id}})
    }
  }
}
</script>
<style lang="less" scoped>
  .detail {
    padding: 20px;
    font-size: 14px;
    .head {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      border-bottom: 1px solid #bfcbd9;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
    .table-title{
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      background-color: #f3f3f3;
      border: 1px solid #dfe6ec;
      border-bottom: none;
      .title-icon{
        margin-right: 8px;
      }
    }
  }
</style>